.bard-fieldtype-wrapper {
    @apply border dark:border-dark-900 rounded relative outline-none;

    * { outline: none; }
}

.bard-editor {
    @apply text-gray-800 dark:text-dark-150 bg-gray-100 dark:bg-dark-650 shadow-inner p-0 relative rounded;
}

.bard-editor .ProseMirror {
    @apply p-2 min-h-40 text-sm leading-tight;
    @apply @md/bard:p-2 text-md leading-normal;
    @apply @lg/bard:p-4;
    &:focus {
        @apply ring-2 ring-inset ring-blue-200 dark:ring-blue-600;
    }
}

.bard-editor .bard-error {
    @apply p-2 @lg:px-4 bg-red-100 text-red-500 text-xs whitespace-nowrap;
}

/*  Modes */
.bard-editor.mode\:read-only .ProseMirror {
    @apply bg-gray-300 dark:bg-dark-600 text-gray-700 dark:text-dark-175;
}

.bard-editor.mode\:minimal .ProseMirror {
    min-height: 80px;
}

.bard-editor.mode\:inline .ProseMirror {
    @apply p-2;
    min-height: 38px;
    p {
        @apply leading-normal mb-0;
    }
}

.bard-fixed-toolbar {
    @apply bg-white dark:bg-dark-800 shadow-none rounded-t border-b dark:border-dark-900 text-sm flex items-start justify-between p-1 z-5 top-0;

    .bard-toolbar-button {
        @apply text-gray-800 dark:text-dark-150 rounded px-1 flex text-center justify-center items-center text-base h-8 w-8 m-0;
        svg {
            @apply w-auto h-4;
        }
    }

    .bard-toolbar-button:hover {
        @apply bg-gray-200 dark:bg-dark-650;
    }

    .bard-toolbar-button.active {
        @apply bg-gray-300 dark:bg-dark-600 text-black dark:text-white;
    }

    .bard-toolbar-button:focus {
        @apply focus-outline;
    }

    .bard-toolbar-button:disabled {
        @apply opacity-50;
        &:hover {
            @apply text-gray-800 dark:text-dark-100;
        }
    }

    button sup {
        @apply font-sans;
    }
}

/* Only top-level Bard fields should have a sticky header */
.workspace .publish-fields:not(.replicator-set-body) > .bard-fieldtype .bard-fixed-toolbar,
.live-preview .publish-fields:not(.replicator-set-body) > .bard-fieldtype .bard-fixed-toolbar {
    @apply sticky;
}

.bard-fixed-toolbar.dark {
    @apply bg-black rounded-full shadow-lg px-4;

    button {
        @apply text-gray-700 rounded px-1 flex items-center justify-center text-base text-center bg-transparent h-8 w-8 my-0 mx-0.5 outline-none;
        svg {
            @apply w-auto h-4;
        }
    }

    button.active {
        @apply text-white;
    }
}

/*  Fixed toolbar inside another bard field */
.bard-fieldtype .bard-fieldtype .bard-fixed-toolbar {
    z-index: 4;
    top: 40px;
}

/*  Fixed toolbar inside a stack */
.stack-content .bard-fixed-toolbar { top: -24px; }

/*  Responive Wangjangling */
@screen md {
    /*  Fixed toolbar below fixed global header */
    .bard-fixed-toolbar { top: 52px; }
    .bard-fieldtype .bard-fieldtype .bard-fixed-toolbar { top: 92px; }

    /*  Fixed toolbar inside a stack */
    .stack-content .bard-fieldtype .bard-fieldtype .bard-fixed-toolbar { top: 16px; }

    /* We don't need the `top` when in Live Preview */
    .live-preview .bard-fixed-toolbar { top: 0; }
}

.bard-floating-toolbar {
    @apply flex bg-black rounded-full shadow-lg px-0;
    white-space: nowrap;

    &:before {
        content: '';
        border: 6px solid transparent;
        border-top-color: black;
        position: absolute;
        top: 100%;
        left: 50% ; [dir="rtl"] & { left: auto ; right: 50% ; }
        margin-left: -3px
    }

    .bard-toolbar-button {
        @apply text-gray-200 h-10 w-10 text-center bg-black rounded-lg flex items-center justify-center;
        font-size: 16px;
        transition: all .1s ease-in-out;
        svg {
            @apply w-4 h-4;
        }
    }

    .bard-toolbar-button:hover {
        @apply text-white;
    }

    .bard-toolbar-button.active {
        @apply text-blue;
    }

    .bard-toolbar-button:focus {
        outline: none;
    }

    .bard-toolbar-button:disabled {
        @apply opacity-50;
        &:hover {
            @apply text-gray-200;
        }
    }

    button sup {
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }
}

.bard-add-set-button {
    @apply flex items-center justify-center absolute rtl:-right-4 ltr:-left-4 top-[-6px] z-1;
}

.bard-footer-toolbar {
    @apply bg-white dark:bg-dark-550 shadow-none text-gray-700 dark:text-dark-175 rounded-b border-t dark:border-dark-300 text-xs p-2 flex items-center justify-between;
    padding: 8px 12px;

    .bard-fullscreen & {
        position: sticky;
        bottom: 0;
        z-index: 10;
    }
}

.bard-set:active .sortable-handle:hover ~ * .popover {
    display: none;
}

.bard-set.has-error > .replicator-set-header label {
    @apply text-red-500;
}

/* The set selection options for each text block
  ========================================================================== */

.bard-set-selector {
    /*  transition: all .15s ease-in-out; */

    .dropdown-menu {
        left: -5px ; [dir="rtl"] & { left: auto ; right: -5px ; }
        right: auto ; [dir="rtl"] & { right: auto ; left: auto ; }
    }
}

.set-picker .popover .popover-content {
    min-width: 320px !important;
}


/* Fullscreen mode
   ========================================================================== */

.bard-fullscreen {
    @apply fixed bg-gray-200 dark:bg-dark-700 inset-0 min-h-screen overflow-scroll rounded-none pt-14;

    & > .bard-editor {
        @apply bg-white dark:bg-dark-800 shadow dark:shadow-dark max-w-xl mx-auto rounded relative my-6 px-8;
    }

    & > .bard-fixed-toolbar {
        @apply shadow dark:shadow-dark h-12 fixed w-full bg-gradient-to-b from-white to-gray-100 dark:from-dark-400 dark:to-dark-500;
        padding: 7px 8px;
        top: 0;
        z-index: 999;

        button {
            @apply mx-1;
        }
    }

    & > .bard-editor > div > .ProseMirror {
        @apply px-6 py-16;
        min-height: calc(100vh - 120px);

        &:focus {
            @apply ring-0;
        }
    }

    .bard-content:not(.bard-set *) > {
        p > code,
        pre code {
            @apply bg-gray-300;
        }
    }

    .bard-set-selector {
        @apply rtl:mr-6 ltr:ml-6;
    }

    .bard-field-options {
        @apply fixed top-0 inset-x-0 bg-gray-700 p-4 w-full;
        @apply ltr:text-right rtl:text-left;
        z-index: 1; /*  to appear over the top of .bard-editor */

        .icon { font-size: 24px; }
        a { margin-left: 16px ; [dir="rtl"] & { margin-right: 16px ; margin-left: 0 ; } color: #fff; opacity: 1; }
    }
}


/* Typography
   -
   Selectors are specific so they don't cascade into the sets, which
   all sit inline within the rest of the elements.
   ========================================================================== */
.bard-fieldtype .ProseMirror {
    outline: 0;
}

.bard-fieldtype .bard-content > {
    p {
        @apply text-gray-800 dark:text-dark-150;
        word-break: break-word;

        line-height: 1.7;
        text-size-adjust: 100%;
    }


    blockquote,
    ol,
    p,
    ul {
        margin-top: 0;
        margin-bottom: .85em;

        b,
        strong { font-weight: 700; }

        em, i { font-style: italic }

        a {
            @apply text-blue dark:text-dark-blue-100 underline break-words;
        }

        a:active,
        a:focus,
        a:hover {
            outline: 0;
            text-decoration: underline;
        }

        img {
            border: 0;
            max-width: 100%;
        }
    }

    blockquote,
    blockquote ol li,
    blockquote ul li,
    ol li,
    ul li {
        > p {
            margin-top: 0;
            margin-bottom: .85em;
        }
    }

    hr {
        @apply bg-gray-600 dark:bg-dark-300;
        height: 4px;
        padding: 0;
        margin: 1.7em 0;
        overflow: hidden;
        border: none;
    }

    hr:after,
    hr:before {
        display: table;
        content: " ";
    }

    hr:after {
        clear: both
    }

    h1, h2, h3, h4, h5, h6 {
        margin-top: 1.275em;
        margin-bottom: .85em;
        font-weight: 700;

        b,
        strong {
            font-weight: 900;
        }

        a {
            @apply text-blue dark:text-dark-blue-100 underline break-words;
        }

        a:active,
        a:focus,
        a:hover {
            outline: 0;
            text-decoration: underline;
        }
    }

    h1 { font-size: 2em }

    h2 { font-size: 1.75em }

    h3 { font-size: 1.5em }

    h4 { font-size: 1.25em }

    h5 { font-size: 1em }

    h6 {
        font-size: 1em;
        @apply text-gray-700;
    }

    h1:first-child,
    h2:first-child,
    h3:first-child,
    h4:first-child,
    h5:first-child,
    h6:first-child {
        margin-top: 0;
    }

    ul,
    blockquote ul,
    .tableWrapper table ul {
        list-style-type: disc;
    }

    ol,
    blockquote ol,
    .tableWrapper table ol {
        list-style-type: decimal;
    }

    ol,
    ul,
    blockquote ol,
    blockquote ul {
        margin: 0 0 .85em;
        padding: 0 0 0 2em;

        [dir="rtl"] & { padding-right: 2em ; padding-left: 0 ; }
    }

    .tableWrapper table ol,
    .tableWrapper table ul {
        margin: 0;
        padding: 0 0 0 2em;

        [dir="rtl"] & { padding-right: 2em ; padding-left: 0 ; }
    }

    ol ol,
    ol ul,
    ul ol,
    ul ul {
        margin-top: 0;
        margin-bottom: 0;
        padding-left: 2em ; [dir="rtl"] & { padding-right: 2em ; padding-left: 0 ; }
    }

    ul ul {
        list-style-type: circle;
    }

    ol ol {
        list-style-type: decimal;
    }

    ul ol {
        list-style-type: decimal;
    }

    ol ul {
        list-style-type: circle;
    }

    blockquote {
        @apply text-gray-800 dark:text-dark-150 rtl:border-r-4 ltr:border-l-4 border-blue dark:border-dark-blue-100 px-4;
        margin: 0 0 .85em;
    }

    blockquote:first-child {
        margin-top: 0;
    }

    blockquote:last-child {
        margin-bottom: 0;
    }

    .tableWrapper table,
    blockquote > .tableWrapper table,
    ol li > .tableWrapper table,
    ul li > .tableWrapper table {
        @apply w-full overflow-hidden m-0 mb-4 bg-white dark:bg-dark-500 text-sm ;
        border-collapse: collapse;
        table-layout: fixed;

        th {
            @apply font-bold rtl:text-right ltr:text-left bg-gray-200 dark:bg-dark-575;
        }

        td, th {
            @apply border dark:border-dark-200 align-top relative py-1 px-2;
            min-width: 1em;
        }

        .selectedCell {
            @apply relative;

            &:after {
                @apply bg-gray-400 dark:bg-dark-200 absolute inset-0 pointer-events-none opacity-25;
                content: '';
            }
        }

        a {
            @apply text-blue dark:text-dark-blue-100 underline break-words;
        }

        a:active,
        a:focus,
        a:hover {
            outline: 0;
            text-decoration: underline;
        }
    }

    p > code {
        @apply font-mono bg-gray-400 dark:bg-dark-750 rounded-sm text-xs;
        padding: 2px 4px;
        top: -1px;
    }

    pre {
        margin-bottom: .85em;
    }

    pre code {
        @apply font-mono bg-gray-400 dark:bg-dark-950 dark:text-dark-100 text-xs p-4 block w-full rounded;
        line-height: 1.8;
    }
}

/* Placeholder
========================================================================== */

.bard-fieldtype .ProseMirror > p.is-editor-empty:first-child::before {
    @apply text-gray-600 dark:text-dark-200;
    content: attr(data-placeholder);
    float: left ; [dir="rtl"] & { float: right ; }
    height: 0;
    pointer-events: none;
}

/* Link toolbar
  ========================================================================== */

  .bard-link-toolbar {

    .input {
        @apply p-0 text-xs h-8 bg-transparent shadow-none border-none;
        width: 240px;
        outline: none;
    }

    .bard-toolbar-button {
        @apply p-0 text-gray-700 outline-none;
        font-size: 16px;

        &:hover {
            @apply text-gray-900;
        }
    }
}

.bard-inline-image-container {
    @apply relative bg-white dark:bg-dark-600 border dark:border-dark-900 rounded whitespace-normal mb-6;
    &:hover {
        cursor: grab;
    }
}

/* Bard Table
  ========================================================================== */

.bard-fieldtype .ProseMirror {
    &.resize-cursor {
        @apply cursor-col-resize;
    }

    .tableWrapper {
        @apply overflow-x-auto;
    }

    table .column-resize-handle {
        @apply absolute top-0 bottom-0 pointer-events-none bg-blue-200;
        width: 3px;
        right: -2px ; [dir="rtl"] & { right: auto ; left: -2px ; }
    }
}
